<template>
  <div
    class="cardWrapper"
    :id="`menuScroll${scrollFirstIndex}-${componentsIndex}`"
    v-if="layerItem.children.length"
  >
    <div class="cardTitleContainer">
      <img
        src="https://img3.job1001.com/data_center/images/position_item_icon.png"
        alt="Icon"
        class="position_item_icon"
      />
      <div class="cardTitle">{{ layerItem.title }}</div>
    </div>
    <div class="layerList">
      <el-row
        class="demo-autocomplete"
        :key="index"
        v-for="(item, index) in layerItem.children || layerList"
      >
        <div class="demo-autocomplete-content">
          <div class="controlLine" :id="`scroll${componentsIndex}-${index}`">
            <span class="tinyTitle">
              <div class="titleFlag"></div>
              {{ item.title }}
            </span>
            <div class="line"></div>
          </div>
          <div
            class="softwareSkillContainer"
            v-if="item.layerId == 160 && item.data && item.data.length"
          >
            <div class="softwareList">
              <div
                class="softwareItem"
                v-for="(_item, index) in item.data.slice(0, -1)"
                :key="index"
              >
                <div class="softwareTitle">
                  <span class="softwareTitleFlag"></span>
                  {{ _item.layerKey }}
                </div>
                <div class="softwareDesc">{{ _item.description }}</div>
              </div>
            </div>
            <div class="softwareDetail">
              <div class="softwareChart">
                <div :class="['h100']" ref="softwareChartElement"></div>
              </div>
              <div class="softwareChartDesc" v-show="description">
                {{ description }}
              </div>
            </div>
          </div>
        </div>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SoftwareSkill',
  props: {
    layerList: {
      type: Array,
      default: () => []
    },
    layerItem: {
      type: Object,
      default: () => {}
    },
    topId: {
      type: String,
      required: true
    },
    isSuperToken: {
      type: Boolean,
      default: false
    },
    scrollFirstIndex: {
      type: [String, Number],
      default: 0
    },
    aiCreateStatus: {
      type: Boolean,
      default: false
    },
    isAdmin: {
      type: Boolean,
      default: false
    },
    editAll: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    layerItem: {
      handler(newValue, oldValue) {
        if (newValue.layerId) {
          this.layerList.forEach((item, index) => {
            if (item.layerId == newValue.layerId) {
              this.componentsIndex = index;
              //开始组装表格数据
              let originData = '';
              let layerThirdItem = item.children[0];
              let layerThirdItemData = item.children[0].data;
              //最后一项
              let layerThirdItemDataLast =
                layerThirdItemData[layerThirdItemData.length - 1];
              //如果最后一项里含有总结这两个字就领出来当做描述，并且从列表中删掉这一项
              if (layerThirdItem) {
                if (layerThirdItemDataLast.description.indexOf('总结') != -1) {
                  originData = layerThirdItemData.slice(0, -1);
                  this.description = layerThirdItemDataLast.layerValue;
                } else {
                  originData = layerThirdItemData;
                }
                //真正组装数据
                originData.forEach((dataItem, dataIndex) => {
                  this.chartData.chartNameData.push({
                    max: 5,
                    description: dataItem.layerKey,
                    value: dataItem.layerValue
                  });
                  this.chartData.chartValueData.push(dataItem.layerValue);
                });
              }
            }
          });
        }
      },
      immediate: true
    }
  },
  data() {
    return {
      description: '',
      positionId: this.$route.query.id,
      componentsIndex: '', //用来标记组件下标，滚动用
      layerDataList: [],
      softwareList: [],
      chartData: {
        chartNameData: [],
        chartValueData: []
      },
      chartAreaFirstColor: 'rgba(93, 209, 255, 1)',
      chartAreaLastColor: 'rgba(88, 250, 168, 0.6)',
      chartAreaLineColor: '#42FFC3'
    };
  },
  mounted() {
    this.init();
  },

  methods: {
    init() {
      if (!this.$refs.softwareChartElement) {
        return;
      }
      this.myChart = this.$echarts.init(this.$refs.softwareChartElement[0]);
      let indicator = this.chartData.chartNameData,
        value = this.chartData.chartValueData;
      if (!indicator.length || !value.length) {
        return;
      }
      const that = this;
      let option = {
        color: [this.chartAreaLineColor],
        radar: [
          {
            indicator,
            radius: '60%',
            center: ['50%', '55%'],
            splitNumber: 5,
            silent: true,
            triggerEvent: true,
            nameGap: 10,
            axisName: {
              formatter: function (value, indicator) {
                const name = indicator.description;
                const realValue = indicator.value;
                const maxCharsPerLine = 8;

                let formattedName = '';
                for (let i = 0; i < name.length; i += maxCharsPerLine) {
                  if (i + maxCharsPerLine < name.length) {
                    formattedName +=
                      name.substring(i, i + maxCharsPerLine) + '\n';
                  } else {
                    formattedName += name.substring(i);
                  }
                }

                return `{a|${formattedName}}\n{b|${realValue}}`;
              },
              rich: {
                a: {
                  color: '#555',
                  fontSize: 15,
                  align: 'center'
                },
                b: {
                  fontFamily: 'D-DIN-PRO-500-Medium',
                  fontWidth: 'bold',
                  color: '#4880FF',
                  fontSize: 26,
                  padding: [0, 0, 0, 6]
                }
              },
              textStyle: {
                color: '#fff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#B8D6FD',
                width: 0.5
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  '#E5EEF7',
                  '#E5EEF7',
                  '#E5EEF7',
                  '#E5EEF7',
                  '#E5EEF7',
                  '#B8D4F2'
                ]
              }
            }
          }
        ],
        series: [
          {
            type: 'radar',
            emphasis: {
              lineStyle: {
                width: 4,
                color: this.chartAreaLineColor
              }
            },
            data: [
              {
                value,
                areaStyle: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      color: this.chartAreaFirstColor,
                      offset: 0
                    },
                    {
                      color: this.chartAreaLastColor,
                      offset: 0.8
                    }
                  ]),
                  borderColor: this.chartAreaLineColor
                },
                itemStyle: {
                  // 设置连接线不可见
                  opacity: 0
                }
              }
            ]
          }
        ]
      };

      try {
        option && this.myChart.setOption(option);
      } catch (error) {
        //console.log("error", error);
      }
      window.addEventListener('resize', () => {
        if (this.myChart) {
          this.myChart.resize();
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.cardWrapper {
  // position: relative;
  min-width: 800px;
  border-radius: 10px;
  border: 1px solid #cbdcfe;
  background-size: 110% 219px;
  background-position: -10px -10px;
  background-image: url('https://img3.job1001.com/data_center/images/salary_bg.png');
  background-repeat: no-repeat;
  padding: 20px;
  flex: 1;
  margin: 0;

  margin-bottom: 14px;
  // margin-top: 20px;
  &::-webkit-scrollbar {
    width: 4px;
    background-color: #fff;
    border-radius: 4px;

    height: 4px;
  }
  &::-webkit-scrollbar-thumb {
    background-color: #d8d8d8;
    border-radius: 4px;
  }
  .cardTitleContainer {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    // position: sticky;
    top: 0;
    .cardTitle {
      height: 30px;
      font-size: 22px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      line-height: 30px;
      margin-right: 15px;
    }
    .introduceJobInput {
      width: 400px;
    }
    .introduceJob {
      height: 21px;
      font-size: 15px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 21px;
      margin-right: 38px;
    }
    .position_item_icon {
      width: 39px;
      height: 40px;
      margin-right: 13px;
    }
  }

  .layerList {
    .demo-autocomplete {
      display: flex;
      .demo-autocomplete-content {
        flex: 1;
      }
      .positionPic {
        width: 140px;
        border-radius: 16px;
        opacity: 0.77;
      }
    }
    .softwareSkillContainer {
      display: flex;
      justify-content: space-between;
      .softwareList {
        flex: 0.55;
        .softwareItem {
          margin-top: 20px;
          &:first-of-type {
            margin-top: 10px;
          }
          .softwareTitle {
            display: flex;
            align-items: center;
            font-family: PingFang-SC, PingFang-SC;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            line-height: 28px;
            text-align: left;
            font-style: normal;
            margin-bottom: 8px;
            .softwareTitleFlag {
              display: inline-block;
              width: 7px;
              height: 7px;
              background: #b6deff;
              margin-right: 10px;
            }
          }
          .softwareDesc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 28px;
            text-align: left;
            font-style: normal;
          }
        }
      }
      .softwareDetail {
        flex: 0.4;
        .softwareChart {
          .h100 {
            min-width: 424px;
            min-height: 320px;
            width: calc(100%);
            flex: 1;
            margin-bottom: 20px;
            &.aicreated {
              // max-width: 48%;
            }
            div {
              display: flex;
              justify-content: center;
            }
          }
        }
        .softwareChartDesc {
          background: #f6f6f6;
          border-radius: 6px;
          padding: 16px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
          text-align: left;
          font-style: normal;
        }
      }
    }
  }

  .titleFlag {
    width: 5px;
    height: 15px;
    border-radius: 3px;
    background: #4880ff;
    margin-right: 12px;
  }
  .controlLine {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 15px;
    .tinyTitle {
      display: flex;
      align-items: center;
      font-weight: bold;
      font-size: 18px;
      // margin-right: 24px;
    }
    .line {
      flex: 1;
      // height: 16px;
      margin-left: 14px;
      border-bottom: 1px solid #efefef;
    }
  }
}
</style>
